import React from 'react'
import './index.css'

const app = () => {
  return (
    <div className="App">
      这是爸爸
      <Son messageForSon="你好，儿砸"/>
    </div>
  )
}
//class方式声明
class Son extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      n:0,
      message:'你好，孙砸',
      user:{
        name:'大明',
        age:18
      }
    }
  }
  xxx(){
    this.add()
    this.changeSonInfo()
  }
  add(){
    // this.setState({n:this.state.n+1}) //最好使用函数的形式，如下，因为setState是异步的
    //setState会异步的更盖state
    this.setState((state)=>{
      let n = state.n+1 //此处不改变message的话，会自动沿用之前的message的值
      console.log(n)
      return{n} //return 一个新的对象
    })
  }
  changeSonInfo(){
    this.setState(state=>{
      return {user:{
          //此时若不给age赋值的话，age不会自动合并就会变成undefined
          //办法就是先把之前的对象拷贝一份，然后更改
          ...state.user,
          name:'韩梅梅'
        }}
    })
  }
  render() {
    return (
      <div className='son'>
        儿子，n:{this.state.n}
        <button onClick={() => this.xxx()}>+1</button>
        <p>我的名字是：{this.state.user.name}</p>
        <p>我的年纪是：{this.state.user.age}</p>
        <p>我爸说：{this.props.messageForSon}</p>
        <Grandson messageForGrandson={this.state.message}/>
      </div>
    )
  }
}
//函数方式声明
const Grandson = (props)=>{
  const [n,setN] = React.useState(0)
  return(
    <div className='grandson'>
      孙子，n:{n}
      <button onClick={()=>setN(n+1)}>+1</button>
      <p>我爷爷说：{props.messageForGrandson}</p>
    </div>
  )
}

export default app


